<script lang="ts" setup>
import { ref } from 'vue';
import { usestore } from '../../../Store/Course';
import { onLoad } from '@dcloudio/uni-app';
let store=usestore()
let search=ref("")
const serchData = () => {
  if (search.value.length == 0) {
    store.cardList2 = []
  }
  else {
    store.cardList.filter((item: { title: string; }) =>
      item.title.toLowerCase().includes(search.value.toLowerCase())
    )
    store.Search(search.value)
  }
}
const seacher=()=>{
	serchData();
}
const searchIf=()=>{
    
}
onLoad(()=>{
  
  
	seacher()
})
</script>

<template>
<uni-nav-bar :fixed="true" :status-bar="true" :border="false" background-color="#f3f3f3" left-width="0" right-width="0">
    <view class="search_container">
    <image src="@/static/images/icons/index/search.svg" style="width: 32rpx; height: 28rpx" class="search_icon" />
    <view class="search_input" confirm-type="search" :style="{ backgroundColor:'#f6f6f6'}">
      <input
		v-model="search"
    @click="searchIf"
		placeholder=""
		placeholder-class="input-placeholder"
		@input="serchData"
	  />
	  
    </view>
	<text class="searcher" @click="seacher"> 搜索</text>
  </view>
</uni-nav-bar>
  
</template>

<style lang="scss" scoped>
.search_container {
  margin-top: 4rpx;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;

  image {
    position: absolute;
    left: 30rpx;
  }

  .search_icon_top {
    top: 35rpx;
    left: 36rpx;
  }

  .search_input {
	disabled:flex;
    height: 80rpx;
    width: 50vw;
    font-size: 24rpx;
    border-radius: 80rpx;
    padding-left: 70rpx;

    input {
      color: #a5a1a1;
      line-height: 100rpx;
	    height: 45px;
    }
  }
  .searcher{
    
  }
}
</style>
